<template>
  <div class="find">
    <div class="findtop">
      <i class="iconfont icon-liebiao"></i>
      <input placeholder="   太阳可以是蓝色的吗"/>
      <i class="iconfont icon-audio-fill"></i>
    </div>
    <swiper></swiper>
    <iconlist></iconlist>
    <gedanlist></gedanlist>
    <div v-if="error">loading component...</div>
    <div v-else><hottopic></hottopic></div>
     
  </div>
</template>

<script>
import {ref, onMounted} from 'vue';
import swiper from './swiper.vue'
import iconlist from './iconList.vue'
import gedanlist from './GedanList.vue'
import axios from 'axios'
export default{
  components:{
    swiper,iconlist,gedanlist,
  },
  
  setup(){
    const error = ref(true);
    onMounted(async()=>{
       await axios.get('http://localhost:3002/remoteEntry.js').then(res=>{
        error.value=false;
       })
       .catch(e=>{
         error.value=true;
        })
    });
    return {error}
  }
}

</script>

<style>
.findtop{
     padding: 0.3rem 0.32rem 0.3rem 0.3rem;
     display: flex;
     justify-content: space-between;
}
   .findtop input{
     width: 5rem;
     border-radius: 1rem;
     opacity:0.5;
     border: 0px;
   }
   .icon-liebiao{
     font-size: 0.6rem;
     color: white;
   }
   .icon-audio-fill{
     font-size: 0.45rem;
     color: white;
   }
.find{
    height: 12.1rem;
    overflow: auto;
}
</style>

